window.onload = function () {

    // 1.点击去注册账号 
    document.querySelector('#loginBox a').onclick = function () {
        // 他的父级登录区域隐藏
        this.parentNode.style.display = 'none'
        //他的父级区域的下一个兄弟元素 显示
        this.parentNode.nextElementSibling.style.display = 'block'
    }
    // 2.点击去登录
    document.querySelector('#regBox a').onclick = function () {
        // 他的父级登录区域隐藏
        this.parentNode.style.display = 'none'
        //他的父级区域的上一个兄弟元素 显示
        this.parentNode.previousElementSibling.style.display = 'block'
    }

    // 需求2:自定义校验规则
    // 必须使用 layui 的内置模块 - form 模块
    // 只要使用layui的模块，必须加载模块
    const form = layui.form;// 加载form模块
    form.verify({
        //定义校验规则,使用的是form.verify()
        //属性是校验名称,值是校验规则
        //属性有两种,函数和数组    
        username: function (value) { //value：表单的值
            if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                return '用户名不能有特殊字符';
            }
            if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                return '用户名首尾不能出现下划线\'_\'';
            }
            if (/^\d+\d+\d$/.test(value)) {
                return '用户名不能全为数字';
            }
            if (!/^[a-zA-Z0-9]{6,10}$/.test(value)) {
                return '用户名必须6到10位数字和字母组成'
            }
            //如果不想自动弹出默认提示框，可以直接返回 true
            if (value === 'xxx') {
                alert('用户名不能为敏感词');
                return true;
            }
        }
        //数组的形式:数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
        , pwd: [
            /^[a-zA-Z0-9]{6,12}$/
            , '密码必须6到12位数字和字母，且不能出现空格'
        ],
        //注册页面的确认密码规则
        repwd: function (value) {
            // value就是 你给哪个标签添加的这个校验规则
            // 这个标签的值就赋值给value
            let pwd = document.querySelector('#regBox .password').value
            if (pwd !== value) {
                return '两次密码输入不一致'
            }
        }
    })


    //3.注册 注册账号表单的提交事件
    document.querySelector('#regBox form').onsubmit = function (e) {
        e.preventDefault()
        //  发送axios注册请求
        axios({
            url: '/api/reguser',
            method: 'post',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            //成功回调
            console.log(res)
            // 判断 如果业务状态码没通过 就不需要往下面继续执行了 
            if (res.status !== 0) {
                //layui提示 服务端返回的错误信息
                return layer.msg(res.message);
            }
            layer.msg('恭喜您,注册用户成功')
            document.querySelector('#regBox form').reset()
            document.querySelector('#regBox a').onclick()
        })
    }

    // 4.登录
    document.querySelector('#loginBox form').onsubmit = function (e) {
        e.preventDefault()
        axios({
            url: '/api/login',
            method: 'POST',
            data: $(this).serialize()
        }).then(({ data: res }) => {
            //成功回调
            console.log(res);
            if (res.status === 1) {
                //返回 后台返回的登录失败信息
                return layer.msg(res.message)
            } else {
                // 存储用户的token
                localStorage.setItem('token', res.token)
                // 弹出  成功信息
                layer.msg('恭喜您,登录成功!', { anim: 4 }, { time: 500 }, function () { });
                // 一秒后 页面跳转到index.html
                setTimeout(() => {
                    location.href = '/index.html'
                }, 1000);
            }
        });
    }

}